<script setup lang="ts">
import { ref } from 'vue'
import { ElButton, ElOption, ElSelect } from 'element-plus'
import 'element-plus/es/components/select/style/css'
import 'element-plus/es/components/option/style/css'
import 'element-plus/es/components/button/style/css'

const current = new Date().getFullYear()
const count = 5
const year = ref(current)
const options = Array(count)
  .fill(1)
  .map((_v, i) => {
    return {
      name: `${current - i}年`,
      value: current - i,
    }
  })

const type = ref(1)
const types = [
  { name: '区域', value: 1 },
  { name: '行业', value: 2 },
]

const typeValue = ref('0')
const typeValues = [{ name: '不限', value: '0' }]
</script>

<template>
  <div class="d-flex align-items-center global-filter">
    <ElSelect v-model="year" style="width: 110px" class="flex-shrink-0 theme-color">
      <ElOption
        v-for="option in options"
        :key="option.value"
        :label="option.name"
        :value="option.value"
      />
    </ElSelect>
    <ElSelect v-model="type" style="width: 100px" class="flex-shrink-0 theme-color">
      <ElOption
        v-for="option in types"
        :key="option.value"
        :label="option.name"
        :value="option.value"
      />
    </ElSelect>
    <ElSelect v-model="typeValue" class="theme-color">
      <ElOption
        v-for="option in typeValues"
        :key="option.value"
        :label="option.name"
        :value="option.value"
      />
    </ElSelect>
    <ElButton
      type="primary"
      plain
      style="
        --el-button-text-color: #3eebff;
        --el-button-hover-text-color: #3eebff;
        --el-button-active-text-color: #3eebff;
        --el-button-active-border-color: #3eebff;
        --el-button-hover-border-color: var(--el-border-color-hover);
        --el-button-bg-color: transparent;
        --el-button-hover-bg-color: transparent;
        --el-button-active-bg-color: transparent;
        --el-button-border-color: #284777;
      "
    >
      数据对比
    </ElButton>
  </div>
</template>

<style scoped>
.global-filter {
  --el-border-radius-base: 0;
  --el-border-color: #284777;
  --el-fill-color-blank: transparent;
  --el-input-text-color: #3eebff;
  /* #284777 */
}
</style>
